<template>
  <div class="box">
    <div class="center-box">
      <div class="left-box fadeInLeft animated">
        <dl>
          <dt>
            <i class="el-icon-s-promotion" style="font-weight: bolder;">消息中心</i>
          </dt>
          <dd v-for="item in textList" :key="item.id" @click="openFullScreen1">
            <span :class="item.classClick" @click="pathChildren(item.id-1)">
              {{item.text}}
            </span>
          </dd>
        </dl>
      </div>
      <div class="right-box fadeInRight animated">
        <el-card v-loading.fullscreen.lock="fullscreenLoading" class="top">{{ titleValue }}</el-card>
        <el-card class="btm">
          <router-view/>
          <div class="img-box">
            <img src="@/assets/data.png" alt="">
          </div>
          </el-card>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'Xinxi',

  data() {
    return {
      titleValue: this.$route.meta.title,
      fullscreenLoading: false,
      // classClick: 'classClick',
      textList: [
        {
          id:1,
          text: '回复我的',
          classClick: ""
        },
        {
          id:2,
          text: '@我的',
          classClick: ""
        },
        {
          id:3,
          text: '收到的赞',
          classClick: ""
        },
        {
          id:4,
          text: '系统通知',
          classClick: ""
        },
        {
          id:5,
          text: '我的消息',
          classClick: ""
        },
        {
          id:6,
          text: '私信存档',
          classClick: ""
        }  
      ]
    };
  },
  watch:{
    "$route.meta.title":{
      handler(){
        this.titleValue = this.$route.meta.title
      }
    }
  },
  mounted() {
    this.textList[0].classClick = 'classClick';
  },

  methods: {
    pathChildren(index){
      console.log('调用了',this.textList[index]);
       this.textList.forEach(element => {
        element.classClick = '';
       });
       this.textList[index].classClick = 'classClick';
      //  console.log('调用了',this.textList[index]);
      switch(index){
        case 0:
          this.$router.push('/front/xinxi/huifu')
          break;
          case 1:
          this.$router.push('/front/xinxi/wode')
          break;
          case 2:
          this.$router.push('/front/xinxi/shoudao')
          break;
          case 3:
          this.$router.push('/front/xinxi/xitong')
          break;
          case 4:
          this.$router.push('/front/xinxi/wdxiaoxi')
          break;
          case 5:
          this.$router.push('/front/xinxi/cundang')
          break;
      }
    },
    openFullScreen1() {
        this.fullscreenLoading = true;
        setTimeout(() => {
          this.fullscreenLoading = false;
        }, 1000);
      },
      openFullScreen2() {
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        setTimeout(() => {
          loading.close();
        }, 1000);
      }
  },
};
</script>

<style lang="less" scoped>
.img-box{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box{
  width: 100%;
  height: 100%;  
  .center-box{
    width: 1300px;
    height: 880px;
    background-color: rgba(201, 201, 201, 0.336);
    margin: 0 auto;
    display: flex;
    .left-box{
      width: 250px;
      height: 100%;
      background-color: rgba(196, 194, 194, 0.808);
      dl{
        display: flex;
        flex-wrap: wrap;
        // justify-content: center;
        // align-items: center;
        dt{
          width: 100%;
          height: 70px;
          text-align: center;
          line-height: 70px;
          font-size: 18px;
          span{
            font-weight: bolder;
            cursor: pointer;
          }
        }
        dd{
          width: 100%;
          text-align: center;
          height: 40px;
          line-height: 40px;
          span{
            // color: rgb(95, 95, 95);
            font-weight: bolder;
            cursor: pointer;

          }
        }
      }
    }
    .right-box{
      width: 1050px;
      height: 100%;
      // background-color: cornflowerblue;

      .top{
        margin: 20px 20px;
        font-size: 16px;
        font-weight: 600;
        color: rgb(170, 170, 170);
      }
      .btm{
        height: 40vh;
        margin: 20px 20px;
      }
    }
  }
}
dd:hover{
  span{
    color: white;
  }
}
dt:hover{
  span{
    color: white;
  }
}
.classClick{
            color: white;
          }

/*base code*/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}
/*the animation definition*/
@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0)
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none
  }
}
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    -ms-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0)
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none
  }
}
.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft
}



/*base code*/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}
/*the animation definition*/
@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0)
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none
  }
}
@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    -ms-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0)
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none
  }
}
.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight
}
</style>